// hotel-management-frontend/src/client/Profile.js

import React, { useState } from "react";
import { Card, Form, Input, Button, Descriptions, message } from "antd";
import { UserOutlined } from "@ant-design/icons";
import { clientAPI } from "../services/api";

const GuestProfile = () => {
  const [form] = Form.useForm();
  const [guestInfo, setGuestInfo] = useState(null);
  const [loading, setLoading] = useState(false);

  const onSearch = async (values) => {
    setLoading(true);
    try {
      const response = await clientAPI.getGuestByCard(values.idCard);

      if (response.data) {
        setGuestInfo(response.data);
      } else {
        message.warning("未找到该身份证号的客户信息");
        setGuestInfo(null);
      }
    } catch (error) {
      console.error("查询客户信息失败:", error);
      message.error(
        error.response?.data?.error || "查询失败，请检查身份证号或网络连接"
      );
      setGuestInfo(null);
    } finally {
      setLoading(false);
    }
  };

  return (
    <Card
      title="我的信息"
      style={{ maxWidth: 800, margin: "20px auto" }}
      variant="bordered" // Updated from bordered
    >
      <Form
        form={form}
        name="guest_profile_query"
        layout="inline"
        onFinish={onSearch}
        style={{ marginBottom: 24 }}
      >
        <Form.Item
          name="idCard"
          label="身份证号"
          rules={[
            { required: true, message: "请输入身份证号" },
            { len: 18, message: "身份证号应为18位" },
          ]}
        >
          <Input
            placeholder="请输入身份证号"
            prefix={<UserOutlined />}
            style={{ width: 300 }}
          />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" loading={loading}>
            查询
          </Button>
        </Form.Item>
      </Form>

      {guestInfo ? (
        <Descriptions variant="bordered" column={1}>
          {" "}
          {/* Updated from bordered */}
          <Descriptions.Item label="姓名">{guestInfo.name}</Descriptions.Item>
          <Descriptions.Item label="性别">{guestInfo.gender}</Descriptions.Item>
          <Descriptions.Item label="身份证号">
            {guestInfo.id_card}
          </Descriptions.Item>
          <Descriptions.Item label="联系电话">
            {guestInfo.phone || "未登记"}
          </Descriptions.Item>
        </Descriptions>
      ) : (
        <div style={{ textAlign: "center", color: "#888" }}>
          请输入身份证号进行查询
        </div>
      )}
    </Card>
  );
};

export default GuestProfile;
